<script setup lang="ts">
import { computed, ref } from 'vue'
import ExportPanel from './ExportPanel.vue'

const props = defineProps({
  allChecked: {
    type: Boolean,
    required: true,
    default: false,
  },
})

const emit = defineEmits(['all-check'])

const localAllChecked = computed({
  get() {
    return props.allChecked
  },
  set(value) {
    emit('all-check', value)
  },
})

// 导出
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
  done()
}
</script>

<template>
  <div class="wrap">
    <el-checkbox
      v-model="localAllChecked"
      label="全选"
      @change="(v: boolean) => emit('all-check', v)"
    />
    <div class="btn-group">
      <el-button type="danger" plain>删除</el-button>
      <el-button type="success" plain @click="dialogVisible = true">导出</el-button>
    </div>

    <!-- 对话框 导出 -->
    <el-dialog
      v-model="dialogVisible"
      title="导出"
      width="480"
      align-center
      :before-close="handleClose"
    >
      <export-panel />
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">导出</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.wrap {
  display: flex;
  padding: 20px 20px 20px 40px;
  background-color: #fff;
  z-index: 1;
  box-shadow: 0 -5px 5px rgba(128, 128, 128, 0.3);
}

.btn-group {
  margin-left: 40px;
}
</style>
